<template>
    <el-skeleton :rows="4" animated>
        <template #template>
            <el-skeleton-item
                variant="circle"
                style="width: 48px; height: 48px"
            />
            <div class="user-info__skeleton flex-justify-center flex-column">
                <el-skeleton-item variant="text" style="width: 25%" />
                <el-skeleton-item variant="text" style="width: 30%" />
                <el-skeleton-item variant="text" style="width: 25%" />
                <div>
                    <el-skeleton-item variant="text" style="width: 10%" />
                    <el-skeleton-item
                        variant="text"
                        style="width: 10%; margin-left: 15px"
                    />
                </div>
                <div>
                    <el-skeleton-item
                        variant="button"
                        class="skeleton-button"
                    />
                    <el-skeleton-item
                        variant="button"
                        class="skeleton-button"
                        style="margin-left: 15px"
                    />
                </div>
            </div>
        </template>
    </el-skeleton>
</template>

<style lang="less" scoped>
.user-info__skeleton {
    :deep(.el-skeleton__item) {
        margin: 15px auto 0 auto;
    }
}
</style>
